<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap-grid.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/5.10.2/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header id="header">
        <div class="overlay"></div>
        <div class="content">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-md-12 mx-auto">
                        <p class="italic">你好，很高兴见到你！</p>
                        <h1>我叫张建伟。我是一名学生</h1>
                        <p class="italic">我很荣幸遇见你</p>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <nav class="navbar navbar-expand-lg">
        <div class="container d-flex">
            <a href="" class="d-flex nab"><img src="img/51.png" alt="" class="img-fluid"></a>
            <ul class="d-flex">
                <li id="li1"><a href="#header" class="nav-link link-scroll active">首页</a></li>
                <li id="li2"><a href="#about" class="nav-link link-scroll ">关于</a></li>
                <li id="li3"><a href="#services" class="nav-link link-scroll ">专业技能</a></li>
                <li id="li4"><a href="#portfolio" class="nav-link link-scroll ">作品集</a></li>
                <li id="li5"><a href="#contact" class="nav-link link-scroll ">联系</a></li>
            </ul>
        </div>
    </nav>

    <section id="about" class="text">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <h2 class="heading">关于</h2>
                    <p class="lead">This can be an about section.</p>
                    <p>Impossible considered invitation him men instrument saw celebrated unpleasant. Put rest and must set kind next many near nay. He exquisite continued explained middleton am. Voice hours young woody has she think equal. Estate moment he at on wonder at season little. Six garden result summer set family esteem nay estate. End admiration mrs unreserved discovered comparison especially invitation.</p>
                    <p>Delightful unreserved impossible few estimating men favourable see entreaties. She propriety immediate was improving. He or entrance humoured likewise moderate. Much nor game son say feel. Fat make met can must form into gate. Me we offending prevailed discovery.</p>
                </div>
                <div class="col-lg-5 mx-auto">
                    <p><img src="img/3.jpg" alt="" class="rounded-circle"></p>
                </div>
            </div>
        </div>
    </section>

    <section id="services" class="texts">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="heading">专业技能</h2>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="box">
                                <i class="fab fa-html5"></i>
                            </div>
                            <h5>HTML5</h5>
                            <p>HTML5自我评价90%</p>
                        </div>
                        <div class="col-md-4">
                            <div class="box">
                                <i class="fab fa-css3"></i>
                            </div>
                            <h5>Css3</h5>
                            <p>Css3自我评价90%</p>
                        </div>
                        <div class="col-md-4">
                            <div class="box">
                                <i class="fab fa-js-square"></i>
                            </div>
                            <h5>JavaScript</h5>
                            <p>JavaScript自我评价85%</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>



    <section id="portfolio" class="gallery">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-lg-8">
                    <h2 class="heading">作品集</h2>
                    <p>下方是我在校期间所做的一些项目，例如淘宝、小米、vivo、oppo等一些电商类型网站。</p>
                </div>

            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="box">
                        <a href="">
                            <img src="img/portfolio-1.jpg" alt="" class="img-fluid">
                        </a>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="box">
                        <a href="">
                            <img src="img/portfolio-2.jpg" alt="" class="img-fluid">
                        </a>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="box">
                        <a href="">
                            <img src="img/portfolio-3.jpg" alt="" class="img-fluid">
                        </a>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="box">
                        <a href="">
                            <img src="img/portfolio-1.jpg" alt="" class="img-fluid">
                        </a>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="box">
                        <a href="">
                            <img src="img/portfolio-2.jpg" alt="" class="img-fluid">
                        </a>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="box">
                        <a href="">
                            <img src="img/portfolio-3.jpg" alt="" class="img-fluid">
                        </a>
                    </div>
                </div>

            </div>
        </div>
    </section>



    <section id="contact" class="text-page">
        <div class="container">
            <div class="row">
                <div class="col-lg-5 mx-auto">
                    <p><img src="img/3.jpg" alt="" class="rounded-circle"></p>
                </div>
                <div class="col-lg-6 pt-4">
                    <h2 class="heading">联系</h2>
                    <p></p>
                    <ul>
                        <li>
                            <strong>姓 名 :</strong>
                            张建伟
                        </li>
                        <li>
                            <strong>年 龄 :</strong>
                            20
                        </li>
                        <li>
                            <strong>现住址 :</strong>
                            Handan, Hebei
                        </li>
                        <li>
                            <strong>Email :</strong>
                            1923791045@qq.com
                        </li>
                        <li>
                            <strong>电 话 :</strong>
                            15032884835
                        </li>
                        <li>
                            <strong>微 信 :</strong>
                            15032884835
                        </li>
                        <li>
                            <strong>所向专业 :</strong>
                            网络前端工程师
                        </li>
                    </ul>

                </div>

            </div>
        </div>
    </section>

    <footer>
        Copyright © 2017 Company Name - Design: 版权归作者所有无权下载
    </footer>
<script src="js/script.js"></script>
</body>
</html>